<template>
  <ganttIndex @click="cancelRight" 
  @handleComplete="cancelRight"
  :dateArr="dateArr" :ganttOriginData="ganttData" ref="ganttRef">
    <template #timeBlock="{ data }">
      <div class="time-block" @contextmenu.stop.prevent="rightClick">{{ data.time.id }}</div>
    </template>
  </ganttIndex>


  <!-- 右键菜单 -->
  <contextMenu v-model:isShow="rightMenu.isShow" v-model:left="rightMenu.left" v-model:top="rightMenu.top">
    <contextMenuItem>
      菜单
      <template #sonMenu>
        <contextMenuItem>菜单6</contextMenuItem>
        <contextMenuItem>菜单7</contextMenuItem>
        <contextMenuItem>菜单8</contextMenuItem>
      </template>
    </contextMenuItem>
    <contextMenuItem>菜单2</contextMenuItem>
    <contextMenuItem>菜单3</contextMenuItem>
    <contextMenuItem>菜单4</contextMenuItem>
  </contextMenu>

</template>
<script setup>
import { ref, computed, onMounted, provide, nextTick } from 'vue';
import ganttIndex from './components/ganttIndex.vue';
import contextMenu from "./components/contextMenu/index.vue";
import contextMenuItem from "./components/contextMenu/item.vue";
// mock数据
import { getAirPlaneData } from '@/mock/api';

// 用于choiceTime处理数据
const dateArr = ref([
  new Date('2021-07-29'),
  new Date('2021-07-31')
])

const ganttRef = ref(null)

const ganttData = ref([])

const getAirPlaneDataFn = () => {
  return new Promise((resolve, reject) => {
    getAirPlaneData().then((res) => {
      resolve(res.data);
    });
  });
};

const rightMenu = ref({
  isShow: false,
  tempObj: null,
  left: 0,
  top: 0
})

const rightClick = (e) => {
  const x = e.pageX
  const y = e.pageY
  rightMenu.value.left = x
  rightMenu.value.top = y
  rightMenu.value.isShow = true
}

const cancelRight = () => {
  rightMenu.value.isShow = false
}

onMounted(() => {
  getAirPlaneDataFn().then(res => {
    ganttData.value = res
    nextTick(() => {
      ganttRef.value.draw()
    })

  })
})
</script>



<style scoped lang="scss">
//时间块的样式
.time-block {
  height: 100%;
  background-color: #ffedb3;
}
</style>
